<template>
	<view class="content">
		<!-- 显示问题的记录区域 -->
		<scroll-view class="question">
			<view class="item" :class="{reverse:item.role!='user'}" v-for="(item,index) in historys">
				<text class="text">{{item.content}}</text>
				<uni-icons :type="item.role=='user'?'person':'search'" size="25"></uni-icons>
			</view>
		</scroll-view>
		<!-- 提问区域 -->
		<view class="word">
			<uni-easyinput class="input" v-model="word" placeholder="" />
			<view class="btn" @tap="doQuestion">提问</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../utils/config'
	const word = ref("")
	// 对话记录
	const historys = ref([])
	// 提问的模型
	const model = {
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	}

	// 向kimi提问
	async function doQuestion() {
		if (word.value == "") {
			uni.showToast({
				title: "请输入问题！",
				icon: 'none'
			})
		} else {
			historys.value.push({
				"role": "user",
				"content": word.value
			})
			model.messages = historys.value
			let res = await uni.$post(CONFIG.kimi_url + "/v1/chat/completions", model)
			console.log(res)
			console.log(res.choices[0].message)
			historys.value.push(res.choices[0].message)
			word.value=""
		}
	}
</script>

<style>
	/* // .content {
	// 	height: calc(100vh - 50px);
	// 	border: 1px solid green;
	// 	position: relative;
	// }

	// .question {
	// 	border: 1px solid blue;
	// 	height: calc(100vh - 97px - 45px);
	// 	.item{
	// 		display: flex;
	// 		flex-direction: row-reverse;
	// 		width:730rpx;
	// 		margin-top: 5px;
	// 		.text{
	// 			border: 1px solid #ccc;
	// 			border-radius: 5px;
	// 			padding: 5px;
	// 			font-size: 14px;
	// 		}
	// 	}
	// 	.reverse{
	// 		flex-direction: row-reverse;
	// 	}
	// }

	// .word {
	// 	position: absolute;
	// 	bottom: 0;
	// 	width: 720rpx;
	// 	height: 85rpx;
	// 	border: 1px solid red;
	// 	display: flex;
	// 	align-items: center;
	// 	padding: 0 5px;

	// 	.btn {
	// 		height: 35px;
	// 		border: 1px solid #ccc;
	// 		border-radius: 5px;
	// 		width: 100rpx;
	// 		text-align: center;
	// 		line-height: 35px;
	// 		margin-left: 5px;
	// 		cursor: pointer;
	// 	}
	// } */
	/* 内容容器样式 */
	.content {
	  display: flex;
	  flex-direction: column;
	  height: 100vh; /* 视口高度 */
	  background-color: #f0f0f0; /* 浅灰色背景 */
	  padding: 15px;
	}
	
	/* 问题记录区域滚动视图样式 */
	.question {
	  flex-grow: 1; /* 占据剩余空间 */
	  overflow-y: auto; /* 垂直滚动 */
	  margin-bottom: 10px; /* 底部边距 */
	  background-color: #ffffff; /* 白色背景 */
	  border-radius: 8px; /* 圆角 */
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
	  padding: 0px; /* 内边距 */
	}
	
	/* 问题记录项样式 */
	.item {
	  display: flex;
	  justify-content: flex-start; /* 起始对齐 */
	  align-items: center;
	  margin-bottom: 8px; /* 项目间距 */
	  padding: 8px 12px;
	  background-color: #ebebeb; /* 浅灰色背景 */
	  border-radius: 12px; /* 圆角 */
	  max-width: 60%; /* 最大宽度 */
	  word-wrap: break-word; /* 长单词换行 */
	}
	
	/* 反向布局，用于非用户消息 */
	.item.reverse {
	  justify-content: flex-end; /* 结束对齐 */
	  background-color: #d1ecf1; /* 浅蓝色背景 */
	}
	
	/* 文本消息样式 */
	.text {
	  font-size: 16px; /* 字体大小 */
	  color: #333; /* 字体颜色 */
	  margin-right: 8px; /* 文本与图标的间距 */
	}
	
	/* 图标样式 */
	uni-icons {
	  margin-left: 8px; /* 图标间距 */
	  color: #888; /* 图标颜色 */
	}
	
	/* 提问区域样式 */
	.word {
	  display: flex;
	  align-items: center;
	  background-color: #ffffff; /* 白色背景 */
	  border-radius: 8px; /* 圆角 */
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
	  padding: 10px; /* 内边距 */
	}
	
	/* 输入框样式 */
	.input {
	  flex-grow: 1; /* 占据剩余空间 */
	  padding: 10px; /* 内边距 */
	  border: none; /* 无边框 */
	  border-radius: 4px; /* 圆角 */
	  outline: none; /* 无轮廓线 */
	}
	
	/* 提问按钮样式 */
	.btn {
	  padding: 10px 20px; /* 内边距 */
	  background-color: #007bff; /* 蓝色背景 */
	  color: white; /* 白色字体 */
	  border-radius: 4px; /* 圆角 */
	  margin-left: 10px; /* 左边距 */
	  font-size: 16px; /* 字体大小 */
	  cursor: pointer; /* 鼠标手形 */
	  transition: background-color 0.3s; /* 背景色渐变 */
	}
	
	.btn:active {
	  background-color: #0056b3; /* 按下时更深的蓝色 */
	}
	
	/* 响应式调整 */
	@media (max-width: 768px) {
	  .item, .item.reverse {
	    max-width: 100%; /* 小屏幕上消息占满宽度 */
	  }
	}
</style>